<!-- 设置下级帮卖 -->
<template>
  <u-popup v-model="show" mode="center" border-radius="14" mask-close-able @maskClick="_close">
    <view>
      <view class="popupHead">设置下级帮卖佣金比例</view>
      <view class="tc">
        <!-- 最大最小佣金相等 -->
        <!-- <view class="linh-30" v-if="clickItem.plice1 === clickItem.plice2"
          >{{item.type === 1 ? '商品售价：' : '你的佣金：'}}<text class="themeFontColor"
            >{{ clickItem.plice1 || clickItem.plice2 }}元</text
          ></view
        > -->
        <!-- 佣金区间 -->
        <!-- <view class="linh-30" v-else
          >{{item.type === 1 ? '商品售价：' : '你的佣金：'}}<text class="themeFontColor"
            >{{ clickItem.plice1 }}~{{ clickItem.plice2 }} 元</text
          ></view
        > -->
        <!-- 佣金比例 -->
        <view class="linh-30 fz-12 justify-center">
          <text class="themeFontColor">下级帮卖出单佣金</text>
          <view class="u-flex inputBox">
            <input
              v-model="clickItem.bili"
              @input="_input"
              :maxlength="3"
            />
            <text class="u-p-l-10 u-p-r-10">%</text>
          </view>
        </view>
        <!-- 快捷选择佣金比例 -->
        <view class="shortcut_options justify-between items-center">
          <view class="options_box justify-center items-center fz-12 viceColorN8 viceBgColor" @click.stop="shortcutFn(80)">80%</view>
          <view class="options_box justify-center items-center fz-12 viceColorN8 viceBgColor" @click.stop="shortcutFn(70)">70%</view>
          <view class="options_box justify-center items-center fz-12 viceColorN8 viceBgColor" @click.stop="shortcutFn(60)">60%</view>
          <view class="options_box justify-center items-center fz-12 viceColorN8 viceBgColor" @click.stop="shortcutFn(50)">50%</view>
        </view>
        <!-- 金额相等 -->
        <view
          class="linh-30 viceColor fz-12 u-p-b-30"
          v-if="clickItem.plice1 === clickItem.plice2"
          >下级出单赚<text class="themeFontColor">{{ numSubFn(clickItem.plice1, myPlice1) || 0 }}元</text> ， 我赚<text class="themeFontColor">{{ myPlice1 || 0 }}元</text></view
        >
        <!-- 佣金区间 -->
        <view class="linh-30 viceColor fz-12 u-p-b-28" v-else
          >下级出单赚<text class="themeFontColor">{{ numSubFn(clickItem.plice1, myPlice1) || 0 }}~{{ numSubFn(clickItem.plice2, myPlice2) || 0 }} 元</text>， 我赚<text class="themeFontColor">{{ myPlice1 || 0 }}元~{{ myPlice2 || 0 }}</text></view
        >
      </view>
      <view class="btnBox">
        <view class="btn" @click="_close">取消</view>
        <view class="btn" @click="_configAdd">{{type === 2 ? '确定并修改' : '确定并添加'}}</view>
      </view>
    </view>
  </u-popup>
</template>

<script>
import goods from "@/api/goods.js";
import Util from "@/api/util.js";
import { numMulti,numSub,numDiv } from "@/utils/calculate";
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    item: {
      type: Object,
      default: {},
    },
    type: {
      type: Number,
      default: 0 // 0.添加橱窗 1.移除橱窗 2.更新橱窗佣金比例
    }
  },
  computed: {
    userInfo () {
      return this.$store.state.userInfo
    },
  },
  watch: {
    show(nval){
      if(nval){
        if(this.item.type && this.item.type === 1){ // 自营取售价
          this.clickItem.plice1 = this.item.minSalePrice
          this.clickItem.plice2 = this.item.maxSalePrice
          this.clickItem.bili = this.item.commissionRatio
        }else{ // 帮卖取佣金
          this.clickItem.plice1 = this.item.mixCommission
          this.clickItem.plice2 = this.item.maxCommission
          if(this.item.type === 2){ // type等于2的时候弹窗上默认填充的比例展示的计算公式: maxSubordinateCommission  /  maxCommission
            this.clickItem.bili = numMulti(numDiv(this.item.maxSubordinateCommission,this.item.maxCommission,2),100,0)
          }else{
            this.clickItem.bili = this.item.commissionRatio
          }
        }
        // 添加取个人设置里面的佣金比例
        if(this.type == 0){this.clickItem.bili = this.userInfo.subordinateHelpSellCommissionRatio || 50}
        this._getMyPlice()
      }
    }
  },
  data() {
    return {
      clickItem: {
        plice1: 0, // 价格或者佣金
        plice2: 0, // 价格或者佣金
        bili: 0 // 比例
      },
      myPlice1: 0, // 下级出单你赚多少
      myPlice2: 0, // 下级出单你赚多少
    };
  },
  methods: {
    // 快捷选择佣金比例
    shortcutFn (mun) {
      this.clickItem.bili = mun
      this._getMyPlice()
    },
    // 佣金比例输入
    _input(e) {
      this.$nextTick(() => {
        this.clickItem.bili = Util.clearNoNum(e.target.value);
        if (Number(this.clickItem.bili) > 100) {
          this.clickItem.bili = 100;
        }
        this._getMyPlice();
      });
    },
    // 减法计算
    numSubFn (mun1,mun2) {
      return numSub(mun1,mun2)
    },
    // 根据佣金比例计算
    _getMyPlice() {
      const baifenbi = numMulti(this.clickItem.bili, 0.01, 2); // 百分比
      this.myPlice1 = baifenbi === 0 ? this.clickItem.plice1 : numSub(this.clickItem.plice1,numMulti(this.clickItem.plice1, baifenbi, 2)); // 你的佣金 - 你的佣金 * 填写的比例 = 你赚的
      this.myPlice2 = baifenbi === 0 ? this.clickItem.plice2 : numSub(this.clickItem.plice2,numMulti(this.clickItem.plice2, baifenbi, 2));
    },
    // 添加橱窗设置佣金比例，修改佣金比例
    _configAdd() {
      if(!this.clickItem.bili && this.clickItem.bili != 0){
        uni.showToast({
          title: '请填写佣金比例',
          icon: 'none'
        });
        return
      }
      if(this.type === 2){ // 修改
        let params = {
            shopWindowId: this.item.shopWindowId, // 橱窗id
            commissionRatioLv2: this.clickItem.bili
          }
          goods.setShopWindow(params).then(res=>{
            uni.showToast({
              title: "修改成功",
              icon: "none",
            });
            this.$emit("success");
            this._close();
          })
      }else{ // 新增
        let params = {
          spuId: this.item.spuId,
          superiorShopWindowId: this.item.shopWindowId, // 橱窗id
          commissionRatioLv2: this.clickItem.bili, // 二级帮买佣金
          isShopWindow: 0, //  0.添加橱窗 1.移除橱窗
        };
        goods.updateShopWindow(params).then((res) => {
          uni.showToast({
            title: "已加入小店，您可在发布视频时添加小店的商品进行推广",
            icon: "none",
          });
          this.$emit("success");
          this._close();
        })
      }
    },
    _close() {
      this.$emit("close");
    },
  },
};
</script>

<style lang="scss" scoped>
.popupHead {
  width: 622rpx;
  background: linear-gradient(180deg, #fffbe8 0%, rgba(255, 251, 232, 0) 100%);
  line-height: 128rpx;
  text-align: center;
  font-size: 32rpx;
  font-weight: 500;
}
.inputBox {
  border: solid 1px #dcdee0;
  align-items: center;
  padding-left: 10rpx;
  margin-left: 20rpx;
  border-radius: 8rpx;
  width: 120rpx;
}
.btnBox {
  display: flex;
  line-height: 96rpx;
  font-size: 32rpx;
  .btn {
    width: 50%;
    text-align: center;
    box-shadow: 1px -1px 1px #ebedf0;
    color: #969799;
    font-weight: 500;
  }
  .btn + .btn {
    color: #e44435;
  }
}
.shortcut_options {
  width: 432rpx;
  margin: 24rpx auto 24rpx;
  .options_box {
    width: 84rpx;
    height: 40rpx;
  }
}
</style>